<template>
	<view class="container">
		<!-- <uni-nav-bar left-icon="left" statusBar	backgroundColor="rgba(255,255,255,0)" :border="false" fixed @clickLeft="back"></uni-nav-bar> -->
		<swiper class="swiper" indicator-dots circular :autoplay="false">
			<swiper-item v-for="(item,index) in imgsComputed(vdata.awardDetail.goodsImgs)" :key="index">
				<image class="img" :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="content-wrap" :style="{ paddingBottom: vdata.awardDetail.state == 3 ? '180rpx' : 0 }">
			<view class="content">
				<view class="title">{{ vdata.awardDetail.goodsName }}</view>
				<view class="desc">
					<!-- <view class="price">价值：￥<text>{{ vdata.awardDetail.goodsPrice ? vdata.awardDetail.goodsPrice / 100 : 0 }}</text></view> -->
					<view class="line"></view>
					<view class="over-time">
						<image src="../../static/new/businessCircle/icon-date.png"></image>
						<text>有效期至{{ vdata.awardDetail.overTime }}</text>
					</view>
					<image v-if="vdata.awardDetail.state == 1" class="state" src="@/static/new/user/cancelled.png"></image>
					<image v-if="vdata.awardDetail.state == 2" class="state" src="@/static/new/user/expired.png"></image>
				</view>
			</view>
			
			<view v-for="(item,index) in imgsComputed(vdata.awardDetail.goodsDetail)" :key="item">
				<image style="width: 100%;" :src="item" mode="widthFix"></image>
			</view>
			<view v-if="vdata.awardDetail.goosRemark" class="rules">
				<text class="title">使用规则</text>
				<!-- <view v-for="item in vdata.awardDetail.goosRemark">{{ item }}</view> -->
				<view>
					<text style="display: block;text-overflow: ellipsis;word-break: break-all;">{{ vdata.awardDetail.goosRemark?.replace(/\\n/g, "\n") }}</text>
				</view>
			</view>
			
			<view v-if="vdata.awardDetail.state == 3" class="btn">
				<view @tap="onOpenQr">出示核销二维码</view>
				<view @tap="navMch">导航去网点</view>
			</view>
		</view>
		
		<!-- 二维码弹窗 -->
		<uni-popup ref="qrPopup" type="bottom">
			<view class="popup-qr">
				<text class="title">核销二维码</text>
				<uni-icons type="closeempty" size="24" color="darkgray" class="close" @click="onCloseQr()"></uni-icons>
				<view class="line"></view>
				<view class="content">
					<image mode="widthFix" :src="tool.drawQRcode(vdata.qrImage)"></image>
					<!-- <view class="des">无限次使用二维码</view> -->
				</view>
				<text class="bottom-wrap" @click="saveQRcode()">
					保存二维码
				</text>
			</view>
		</uni-popup>
		
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import tool from '@/util/tool.js' // 工具类函数
	import { $awardDetail } from '@/http/apiManager.js'
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import { reactive, ref, computed, getCurrentInstance } from 'vue'
	import storageManage from '@/util/storageManage.js'
	import appConfig from '@/config/appConfig'
	import createWebSocket from '@/websocket/websocket-factory.js';
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	// 二维码弹窗
	const qrPopup = ref();
	
	const vdata = reactive({
		fansAwardId: '',    // 用户奖品ID
		goodsId: '',    // 奖品ID
		awardDetail: {},	// 商品详情
		qrImage: '',	// 保存fansAwardId和商品名称
	})
	
	onLoad(async ({ fansAwardId, goodsId })=>{
		vdata.fansAwardId = fansAwardId
		vdata.goodsId = goodsId
		// 获取奖品详情
		await getAwardDetail()
	})
	
	// 获取奖品详情
	async function getAwardDetail(){
		const payload = {
			fansAwardId: vdata.fansAwardId,
			goodsId: vdata.goodsId
		}
		uni.showLoading({ title: '加载中...' })
		const { bizData } = await $awardDetail(payload)
		uni.hideLoading()
		// 处理备注
		// if(bizData.goosRemark){
		// 	bizData.goosRemark = bizData.goosRemark.split('/n')
		// }else{
		// 	bizData.goosRemark = []
		// }
		Object.assign(vdata.awardDetail,bizData)
		vdata.qrImage = JSON.stringify({
			type: 'goods',
			goodsName: bizData.goodsName,
			...payload
		})
	}
	
	/**
	 * 奖品主图 自动处理
	 */
	const imgsComputed = computed(() => {
		return (imgs) => imgs?.split(',')
	})
	
	function back(){
		uni.navigateBack()
	}
	function navMch(){
		uni.navigateTo({
			url: `/pageUser/myAward/mchList?goodsId=${vdata.awardDetail.goodsId}`
		})
	}
	/**
	 * 关闭二维码弹窗
	 */
	const onCloseQr = () => {
		qrPopup.value.close();
	}
	/**
	 * 展示核销二维码
	 */
	function onOpenQr(){
		qrPopup.value.open();
	}
	function saveQRcode() {
		saveBaseImgFile(tool.drawQRcode(vdata.qrImage))
	}
	// 将base64 图片保存到本地系统相册
	function saveBaseImgFile(imgSrc) {
		var fs = uni.getFileSystemManager();
		var number = Math.random();
		fs.writeFile({
			filePath: uni.env.USER_DATA_PATH + '/pic' + number + '.png',
			data: imgSrc.split('base64,')[1],
			encoding: 'base64',
			success: res => {
				uni.saveImageToPhotosAlbum({
					filePath: uni.env.USER_DATA_PATH + '/pic' + number + '.png',
					success: function(res) {
						$infoBox.toast('保存成功')
					},
					fail: function(err) {
						$infoBox.toast(err)
					}
				})
			},
			fail: err => {
				$infoBox.toast(err)
			}
		})
	}
</script>

<style lang="less">
	.container{
		width: 100%;
		background-color: #F7F8FB;
		min-height: 100vh;
		overflow: hidden;
		// .top-bg{
		// 	width: 100%;
		// 	height: 750rpx;
		// 	background-size: 100% 750rpx;
		// 	background-position: 0 0;
		// 	background-repeat: no-repeat;
		// 	position: fixed;
		// 	top: 0;
		// 	left: 0;
		// }
		.swiper{
			height: 420rpx;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.content-wrap{
			background-color: #F7F8FB;
			position: relative;
			z-index: 9;
			overflow: hidden;
			box-sizing: border-box;
		}
		.content{
			background: #FFFFFF;
			padding: 40rpx;
			
			
			
			.title{
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 38rpx;
			}
			.desc{
				position: relative;
				.price{
					color: #FF8833;
					font-size: 24rpx;
					text{
						font-size: 36rpx;
						font-weight: bold;
					}
				}
				.line{
					width: 100%;
					height: 1rpx;
					background-color: #eee;
					margin: 26rpx 0;
				}
				.over-time{
					display: flex;
					align-items: center;
					gap: 10rpx;
					image{
						width: 28rpx;
						height: 28rpx;
					}
					text{
						font-size: 24rpx;
						color: #666666;
					}
				}
				.state{
					width: 160rpx;
					height: 160rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
			
			
		}
		
		.rules{
			background: #FFFFFF;
			position: relative;
			padding: 40rpx;
			.title{
				font-size: 40rpx;
				color: #333333;
				font-weight: bold;
				position: relative;
				&::after{
					content: '';
					display: inline-block;
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 10rpx;
					background: conic-gradient( from 180deg at 100% 50%, #24C789 0%, #4AE5BE 100%);
					opacity: 0.8;
					border-radius: 5rpx;
				}
			}
			view{
				font-size: 28rpx;
				color: #333333;
				margin-top: 40rpx;
			}
		}
	
		.btn{
			width: 100%;
			box-sizing: border-box;
			padding: 12rpx 40rpx 80rpx;
			display: flex;
			gap: 30rpx;
			color: #fff;
			background-color: #fff;
			border-top: 1rpx solid #eee;
			position: fixed;
			bottom: 0;
			left: 0;
			text-align: center;
			view{
				background: #FF8833;
				border-radius: 45rpx;
				padding: 28rpx 62rpx;
				flex: 1;
				font-size: 28rpx;
				&:nth-child(2){
					background: #24C789;
				}
			}
		}
		
		.popup-qr {
			display: flex;
			flex-direction: column;
			padding: 40rpx 30rpx;
			font-size: 28rpx;
			background-color: white;
			border-radius: 20rpx 20rpx 0 0;
			letter-spacing: 1px;
			box-sizing: border-box;
			align-items: center;
			position: relative;
		
			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 20rpx;
				text-align: center;
			}
		
			.close {
				position: fixed;
				right: 0;
				top: 0;
				margin-top: 25rpx;
				margin-right: 25rpx;
			}
		
			.line {
				height: 1rpx;
				background-color: #E6E6E6;
				margin: 20rpx 0rpx;
				width: 100%;
			}
		
		
		
			.content {
				// border: 10rpx solid #24C78933;
				width: 70%;
				margin: 50rpx 0;
				text-align: center;
				background-color: #24C78933;
		
				image {
					width: 100%;
					background-color: white;
					border: 10rpx solid #24C78933;
					box-sizing: border-box;
				}
		
				.des {
					width: 100%;
					padding: 5rpx 0 15rpx 0rpx;
				}
			}
		
			.bottom-wrap {
				font-size: 30rpx;
				width: 100%;
				color: white;
				border-radius: 40rpx;
				padding: 20rpx 0rpx;
				background-color: #24C789;
				text-align: center;
				margin-bottom: 10rpx;
			}
		
		}
	
	}
</style>